<template>
	<scroll-view class="sidebar" scroll-y="true">
		<uni-data-menu ref="menu" :value="currentMenu" :staticMenu="staticMenu" collection="opendb-admin-menus" :page-size="500"
			:field="field" orderby="sort asc" active-text-color="#00f0ff" @select="select">
		</uni-data-menu>
	</scroll-view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import config from '@/admin.config.js'
	export default {
		data() {
			return {
				...config.sideBar,
				field: 'url as value, name as text, menu_id, parent_id, sort, icon, permission'
			}
		},
		computed: {
			...mapState('app', ['inited', 'navMenu', 'active']),
			...mapState('user', ['userInfo']),

			currentMenu() {
				return this.splitFullPath(this.active)
			}
		},
		// #ifdef H5
		watch: {
			$route: {
				immediate: true,
				handler(newRoute, oldRoute) {
					if (newRoute.fullPath !== (oldRoute && oldRoute.fullPath)) {
						this.changeMenuActive(newRoute.fullPath)
					}
				}
			},
			userInfo: {
				immediate: true,
				handler(newVal, oldVal) {
					if (newVal) {
						this.$nextTick(function(){
							this.$refs.menu.load()
						})
					}
				}
			}
		},
		// #endif
		methods: {
			...mapActions({
				changeMenuActive: 'app/changeMenuActive'
			}),
			select(e) {
				let url = e.value

				if (!url) {
					url = this.active
				}
				this.clickMenuItem(url)
			},
			clickMenuItem(url) {
				// #ifdef H5
				if (url.indexOf('http') === 0) {
					return window.open(url)
				}
				// #endif

				// url 开头可用有 / ，也可没有
				if (url[0] !== '/' && url.indexOf('http') !== 0) {
					url = '/' + url
				}
				// TODO 后续要调整
				uni.redirectTo({
					url: url,
					fail: () => {
						uni.showModal({
							title: '提示',
							content: '页面 ' + url + ' 跳转失败',
							showCancel: false
						})
					}
				})
			},
			splitFullPath(path) {
				if (!path) {
					path = '/'
				}
				return path.split('?')[0]
			},
		}
	}
</script>

<style lang="scss">
	/* ==================== 科技风侧边栏 ==================== */
	.sidebar {
		position: fixed;
		top: var(--top-window-height);
		width: 240px;
		height: calc(100vh - (var(--top-window-height)));
		box-sizing: border-box;
		background: rgba(10, 14, 39, 0.8);
		backdrop-filter: blur(10px);
		border-right: 1px solid rgba(0, 240, 255, 0.3);
		box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
		padding-bottom: 10px;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	/* 侧边栏顶部扫描线效果 */
	.sidebar::before {
		content: '';
		position: absolute;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.1), transparent);
		animation: scanVertical 4s infinite;
	}

	@keyframes scanVertical {
		0%, 100% { top: -100%; }
		50% { top: 100%; }
	}

	/* 侧边栏右侧发光边框 */
	.sidebar::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		width: 2px;
		height: 100%;
		background: linear-gradient(180deg,
			transparent 0%,
			rgba(0, 240, 255, 0.5) 20%,
			rgba(0, 240, 255, 0.8) 50%,
			rgba(0, 240, 255, 0.5) 80%,
			transparent 100%
		);
		animation: glowPulse 3s infinite;
	}

	@keyframes glowPulse {
		0%, 100% { opacity: 0.3; }
		50% { opacity: 1; }
	}

	.title {
		margin-left: 5px;
		color: #00f0ff;
		font-weight: 600;
		text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	}

	/* ==================== 菜单项样式 ==================== */
	/* 覆盖 uni-data-menu 的默认样式 */
	::v-deep .uni-data-menu {
		background: transparent !important;
	}

	/* 一级菜单项 */
	::v-deep .uni-data-menu .menu-item {
		background: transparent !important;
		color: #7f8ea3 !important;
		border-left: 3px solid transparent;
		transition: all 0.3s ease;
		padding: 12px 16px !important;
		margin: 4px 8px;
		border-radius: 6px;
		position: relative;
		overflow: hidden;
	}

	::v-deep .uni-data-menu .menu-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 100%;
		background: linear-gradient(90deg, rgba(0, 240, 255, 0.1), transparent);
		transition: width 0.3s ease;
	}

	::v-deep .uni-data-menu .menu-item:hover {
		background: rgba(0, 240, 255, 0.1) !important;
		color: #00f0ff !important;
		border-left-color: #00f0ff;
		transform: translateX(4px);
	}

	::v-deep .uni-data-menu .menu-item:hover::before {
		width: 100%;
	}

	/* 激活状态的菜单项 */
	::v-deep .uni-data-menu .menu-item.active,
	::v-deep .uni-data-menu .menu-item.is-active {
		background: linear-gradient(90deg,
			rgba(0, 240, 255, 0.2) 0%,
			rgba(0, 240, 255, 0.05) 100%
		) !important;
		color: #00f0ff !important;
		border-left-color: #00f0ff !important;
		font-weight: 600;
		box-shadow: 0 2px 10px rgba(0, 240, 255, 0.2);
	}

	/* 菜单图标 */
	::v-deep .uni-data-menu .menu-item .uni-icons {
		color: #7f8ea3 !important;
		transition: all 0.3s ease;
		margin-right: 8px;
	}

	::v-deep .uni-data-menu .menu-item:hover .uni-icons,
	::v-deep .uni-data-menu .menu-item.active .uni-icons,
	::v-deep .uni-data-menu .menu-item.is-active .uni-icons {
		color: #00f0ff !important;
		filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
	}

	/* 菜单文本 */
	::v-deep .uni-data-menu .menu-item .menu-text {
		font-size: 13px;
		letter-spacing: 0.3px;
		transition: all 0.3s ease;
	}

	/* 子菜单容器 */
	::v-deep .uni-data-menu .submenu {
		background: rgba(10, 14, 39, 0.5) !important;
		border-left: 2px solid rgba(0, 240, 255, 0.2);
		margin-left: 12px;
		border-radius: 4px;
		overflow: hidden;
	}

	/* 二级菜单项 */
	::v-deep .uni-data-menu .submenu .menu-item {
		padding-left: 36px !important;
		font-size: 12px;
		margin: 2px 4px;
	}

	::v-deep .uni-data-menu .submenu .menu-item:hover {
		background: rgba(0, 240, 255, 0.15) !important;
	}

	/* 展开/收起图标 */
	::v-deep .uni-data-menu .menu-item .arrow {
		color: #7f8ea3 !important;
		transition: all 0.3s ease;
	}

	::v-deep .uni-data-menu .menu-item:hover .arrow {
		color: #00f0ff !important;
	}

	::v-deep .uni-data-menu .menu-item.is-open .arrow {
		transform: rotate(90deg);
		color: #00f0ff !important;
	}

	/* 滚动条样式 */
	.sidebar::-webkit-scrollbar {
		width: 6px;
	}

	.sidebar::-webkit-scrollbar-track {
		background: rgba(10, 14, 39, 0.5);
		border-radius: 3px;
	}

	.sidebar::-webkit-scrollbar-thumb {
		background: rgba(0, 240, 255, 0.3);
		border-radius: 3px;
		transition: background 0.3s;
	}

	.sidebar::-webkit-scrollbar-thumb:hover {
		background: rgba(0, 240, 255, 0.5);
	}

	/* 菜单分组标题 */
	::v-deep .uni-data-menu .menu-group-title {
		color: #7f8ea3 !important;
		font-size: 12px;
		padding: 12px 16px 8px;
		margin-top: 16px;
		font-weight: 600;
		letter-spacing: 1px;
		text-transform: uppercase;
		border-bottom: 1px solid rgba(0, 240, 255, 0.1);
	}

	/* 空状态 */
	::v-deep .uni-data-menu .empty {
		color: #7f8ea3 !important;
		text-align: center;
		padding: 40px 20px;
		font-size: 13px;
	}

	/* 加载状态 */
	::v-deep .uni-data-menu .loading {
		text-align: center;
		padding: 20px;
		color: #00f0ff !important;
	}

	/* 响应式调整 */
	@media (max-width: 768px) {
		.sidebar {
			width: 200px;
		}

		::v-deep .uni-data-menu .menu-item {
			padding: 10px 12px !important;
			font-size: 12px;
		}
	}
</style>
